<template>
  <div class="container">
    <h1>{{title}}：打印条码</h1>
    <el-row class="check-all">
      <el-col :span="12" align="left">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </el-col>
    </el-row>
    <div class="code-wrap" v-for="(item,index) in data.signindetailitems" :key="index">
      <el-checkbox v-model="item.isChecked" @change="handleCheckedCodeChange($event,index)"></el-checkbox>
      <div class="code-box" @click="handleSelectBox(index)">
        <el-row>
          <el-col :span="12" align="left">Location：{{item.tsareacode}}</el-col>
          <el-col :span="12" align="left">QC：{{data.qualitycontrol?'YES':'NO'}}</el-col>
          <el-col :span="12" align="left">sku：{{data.productspeccode}}</el-col>
          <el-col :span="12" align="left">&times; {{item.signquantity}}</el-col>
        </el-row>
        <svg :id="'code'+index" />
      </div>
    </div>
    <el-row>
      <el-col :span="24" align="left">
        <el-button type="primary" @click="printInit">{{$t('m.print')}}</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getLodop } from '@/utils/LodopFuncs'
import JsBarcode from 'jsbarcode'

export default {
  name:'printTemplate',
  data(){
    return {
      title:'',
      data:{},

      checkAll:false
    }
  },
  activated(){
    this.title = this.$route.query.title
    this.data = JSON.parse(this.$route.query.data)

    this.$nextTick(()=>{
      for(let i=0;i<this.data.signindetailitems.length;i++){
        this.$set(this.data.signindetailitems[i],'isChecked',false)
        let id = `#code${i}`,text = this.data.signindetailitems[i].tasknumber
        this.barcode(id,text)
      }
    })
  },
  methods:{
    printInit(){
      let LODOP = getLodop()
      LODOP.SET_PRINT_PAGESIZE(1, 1380, 880, '')
      LODOP.PRINT_INIT('打印条码')
      LODOP.ADD_PRINT_HTM(
        100,
        '3%',
        '94%',
        910,
        document.getElementById('div1').innerHTML
      )
    },
    barcode(id,text){
      JsBarcode(id, text, {
        format:'CODE128', //选择要使用的条形码类型
        text, //显示文本
        displayValue:true, //是否在条形码下方显示文字
        textPosition:'bottom', //设置文本的垂直位置
        background:'#fff', //设置条形码的背景
        font:'微软雅黑', //设置文本的字体
        margin:5 //设置条形码周围的空白边距
      })
    },
    /* el-checkbox start */
    handleCheckAllChange(val){
      for(let i=0;i<this.data.signindetailitems.length;i++){
        this.$set(this.data.signindetailitems[i],'isChecked',val)
      }
    },
    // 判断是否全选状态
    handleCheckedCodeChange(){
      let result = 0
      for(let i=0;i<this.data.signindetailitems.length;i++){
        if(this.data.signindetailitems[i].isChecked) result++
      }
      this.checkAll = result === this.data.signindetailitems.length
    },
    /* el-checkbox end */

    /* code-box select */
    handleSelectBox(index){
      this.$set(this.data.signindetailitems[index],'isChecked',!this.data.signindetailitems[index].isChecked)
      this.handleCheckedCodeChange()
    }
    /* code-box select */
  }
}
</script>
<style lang="scss" scoped>
h1{text-align: left; margin-bottom: 22px;}
.container{
  .code-wrap{
    display: flex;
    align-items: center;
    ::v-deep .el-checkbox{margin-right: 22px;}
  }
  .code-box{
    width: 400px;
    background-color: #fff;
    border: 1px solid #000;
    padding: 10px 40px;
    margin-bottom: 22px;
    box-sizing: border-box;
  }
  ::v-deep .el-row{
    font-size: 14px;
  }
  ::v-deep .el-col{
    line-height: 1.5;
  }
}
.check-all{margin-bottom: 22px;}
</style>